<template>
  <div>
    <div id="plotlyChart01" style="width: 50%; height: 500px; float:left"></div>
    <div id="plotlyChart02" style="width: 50%; height: 500px; float:left"></div>
    <div id="plotlyChart03" style="width: 50%; height: 500px; float:left"></div>
    <div id="plotlyChart04" style="width: 50%; height: 500px; float:left"></div>
    <div style="width: 100%; background-color: #d7f9ff; display: flex; align-items: center;">
      <span style="margin-left: 10%;">您答卷用时{{timeCount}}秒。</span>
        <el-button style="margin-left: auto; margin-right: 45%; display: flex; justify-content: center;"  type="primary" class="submit" @click="submit">
          3D显示
        </el-button>
    </div>
  </div>
</template>

<script>
/* eslint-disable no-undef */
import { mapGetters } from 'vuex'
export default {
  name: 'D2View',
  data () {
    return {
      bgcolor: '#BADFF7',
      userColor: '#00d6ff',
      groupColor: '#0078ff',
      plotBGColor: '#d7f9ff',
      paperBGColor: '#d7f9ff'
    }
  },
  computed: mapGetters({
    basicIndex: 'getBasicIndex',
    avgIndex: 'getAvgIndex',
    timeCount: 'getTimeCount'
  }),
  created () {
  },
  mounted () {
    // this.getParams()
    // this.basicIndex={learn:2,experience:1.2,health:3.89,burnout:4.17,anxious:3.75,pressure:3.75,ability:3.54,ba:4.17,pa:3.75,ea:5,sa:1.25,pb:4.17,influence:0.83,oi:0,pi:1,si:1.5}
    // var d3 = Plotly.d3;

    // var img_png = d3.select('#png-export');
    // /定义二级指标和指标
    window.scrollTo(0, 0)
    this.showData()
  },
  watch: {
    // '$route': 'getParams'
  },
  methods: {
    showData () {
      const trace1 = {
        x: ['学习', '经验', '前瞻能力'],
        y: [this.basicIndex.learn, this.basicIndex.experience, this.basicIndex.pb],
        type: 'bar',
        name: '个人指标',
        marker: { color: this.userColor }
      }
      const trace1A = {
        x: ['学习', '经验', '前瞻能力'],
        y: [this.avgIndex.learn, this.avgIndex.experience, this.avgIndex.pb],
        type: 'bar',
        name: '平均指标',
        marker: { color: this.groupColor }
      }
      const data1 = [trace1, trace1A]
      // 外围设置
      const layout1 = {
        plot_bgcolor: this.plotBGColor, // 设置绘图区域的背景颜色
        paper_bgcolor: this.paperBGColor, // 设置整个图表的背景颜色
        scene: {
          xaxis: { visible: false },
          yaxis: { visible: false },
          zaxis: { visible: false }
        },
        title: '前瞻能力',
        title_x: 0.5
      }
      // 显示
      Plotly.newPlot('plotlyChart01', data1, layout1)
      // .then(
      //   function (gd) {
      //     Plotly.toImage(gd, { height: 400, width: 500 })
      //       .then(function (url) {
      //         img_png.attr("src", url);
      //         return Plotly.toImage(gd, { format: 'png', height: 400, width: 500 });
      //       })
      //   });

      // /定义二级指标和指标
      const trace2 = {
        x: ['压力', '倦怠', '心理健康'],
        y: [this.basicIndex.pressure, this.basicIndex.burnout, this.basicIndex.health],
        type: 'bar',
        name: '个人指标',
        marker: { color: this.userColor }
      }
      const trace2A = {
        x: ['压力', '倦怠', '心理健康'],
        y: [this.avgIndex.pressure, this.avgIndex.burnout, this.avgIndex.health],
        type: 'bar',
        name: '平均指标',
        marker: { color: this.groupColor }
      }
      const data2 = [trace2, trace2A]
      // 外围设置
      const layout2 = {
        plot_bgcolor: this.plotBGColor, // 设置绘图区域的背景颜色
        paper_bgcolor: this.paperBGColor, // 设置整个图表的背景颜色
        scene: {
          xaxis: { visible: false },
          yaxis: { visible: false },
          zaxis: { visible: false }
        },
        title: '心理健康',
        title_x: 0.5
      }
      // 显示
      Plotly.newPlot('plotlyChart02', data2, layout2)

      // /定义二级指标和指标
      // 生成条形图数据
      const trace3 = {
        x: ['情绪调节能力', '业务能力', '抗压能力', '角色能力'],
        y: [this.basicIndex.ea, this.basicIndex.sa, this.basicIndex.pa, this.basicIndex.ability],
        type: 'bar',
        name: '个人指标',
        marker: { color: this.userColor }
      }
      const trace3A = {
        x: ['情绪调节能力', '业务能力', '抗压能力', '角色能力'],
        y: [this.avgIndex.ea, this.avgIndex.sa, this.avgIndex.pa, this.avgIndex.ability],
        type: 'bar',
        name: '平均指标',
        marker: { color: this.groupColor }
      }
      const data3 = [trace3, trace3A]
      // 外围设置
      const layout3 = {
        plot_bgcolor: this.plotBGColor, // 设置绘图区域的背景颜色
        paper_bgcolor: this.paperBGColor, // 设置整个图表的背景颜色
        scene: {
          xaxis: { visible: false },
          yaxis: { visible: false },
          zaxis: { visible: false }
        },
        title: '角色能力',
        title_x: 0.5
      }
      // 显示
      Plotly.newPlot('plotlyChart03', data3, layout3)

      // /定义二级指标和指标
      // 生成条形图数据
      const trace4 = {
        x: ['政治影响力', '组织影响力', '外部影响力', '影响力'],
        y: [this.basicIndex.pi, this.basicIndex.oi, this.basicIndex.si, this.basicIndex.influence],
        type: 'bar',
        name: '个人指标',
        marker: { color: this.userColor }
      }
      const trace4A = {
        x: ['政治影响力', '组织影响力', '外部影响力', '影响力'],
        y: [this.avgIndex.pi, this.avgIndex.oi, this.avgIndex.si, this.avgIndex.influence],
        type: 'bar',
        name: '平均指标',
        marker: { color: this.groupColor }
      }
      const data4 = [trace4, trace4A]
      // 外围设置
      const layout4 = {
        plot_bgcolor: this.plotBGColor, // 设置绘图区域的背景颜色
        paper_bgcolor: this.paperBGColor, // 设置整个图表的背景颜色
        scene: {
          xaxis: { visible: false },
          yaxis: { visible: false },
          zaxis: { visible: false }
        },
        title: '影响力',
        title_x: 0.5
      }
      // 显示
      Plotly.newPlot('plotlyChart04', data4, layout4)
    },
    submit () {
      // 跳转3D显示
      this.$msgbox.alert('正在跳转中，请耐心等待......', '提示', {
        confirmButtonText: '确定',
        callback: action => {
          // 在用户点击确定按钮后执行的回调函数
        }
      })
      // 3秒后关闭消息框
      setTimeout(() => {
        this.$msgbox.close()
      }, 3000)
      this.$router.push({
        path: '/3D'
      })
    }
  }
}
</script>
<style>
.shine {
  position: relative;
  /* 设置相对定位 */
  z-index: 0;
  /* 调整背景层级为较低的值 */
  background-color: linear-gradient(to bottom, #FF0000, #FFFF00), linear-gradient(to right, #FF0000, #FFFF00);
  /* 上到下和左到右的渐变 */
  background-size: 100% 100%;
  /* 设置背景尺寸为100%宽度和100%高度 */
  background-repeat: no-repeat;
  /* 禁用背景重复 */
}

.submit {
  margin: 40px auto 0;
  display: table-cell;
}</style>
